<template>
  <div class="history-wrapper">
    <div class="history-header">
      <span class="back" @click="back"><i class="el-icon-arrow-left">返回</i></span>
      记录浏览
    </div>
    <div class="history-data">
      <div style="box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03), 0px 6px 16px -8px rgba(0, 0, 0, 0.08);">
        <div class="data-header">
          <div>时间</div>
          <div>操作人</div>
          <div>内容</div>
        </div>
        <ex-infinite-scroll ref="ins" class="data-list" url="audit/task/history" :size="20">
          <template slot="content" slot-scope="{list}">
            <div class="data-item" v-for="item in list" :key="item.id">
              <div>{{item.completeDate}} {{item.completeTime}}</div>
              <div>{{item.operatorName}}</div>
              <div>{{item.statusMean}}:{{item.processName}} - {{item.description}}</div>
            </div>
          </template>
          <template slot="footer" slot-scope="{noMore}">
            <div class="footer">
              {{noMore ? '没有更多信息了': '加载更多信息'}}
            </div>
          </template>
        </ex-infinite-scroll>
      </div>
    </div>
  </div>
</template>

<script>
import ExInfiniteScroll from '@/components/common/ex-infinite-scroll'

export default {
  data() {
    return {
      tableData: []
    }
  },
  components:{
    ExInfiniteScroll
  },
  async mounted() {
    this.$refs.ins.getData({})
  },
  methods:{
    back() {
      this.$router.go(-1);
    }
  }
}
</script>

<style lang="scss" scoped>
  .history-wrapper{
    background: #F5F5F7;
    min-height: 100vh;
    .history-header{
      height: 64px;
      background: #00A0E9;
      font-size: 18px;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 64px;
      text-align: center;
      position: relative;
      .back{
        font-size: 16px;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 22px;
        position: absolute;
        left: 32px;
        top: 21px;
        cursor: pointer;
      }
    }
    .history-data{
      padding: 32px;
      .data-header{
        width: 100%;
        display: flex;
        background: #FFF;
        line-height: 64px;
        font-size: 18px;
        color: #AEAEB0;
        border-radius: 8px 8px 0px 0px;
        >div{
          flex: 3;
          text-align: center;
          position: relative;
          &::after{
            content: '';
            display: block;
            position: absolute;
            right:0;
            top: 21px;
            width: 2px;
            height: 22px;
            background: #8E8E93;
            opacity: 0.3;
          }
        }
        >div:last-child{
          flex: 7;
           &::after{
            content: none;
          }
        }
      }
      .data-list{
        margin-top: 2px;
        height: calc(100vh - 200px);
        overflow: auto;
        .data-item{
          background: #FFF;
          line-height: 52px;
          font-size: 16px;
          font-weight: 500;
          color: #262626;
          display: flex;
           >div{
            flex: 3;
            text-align: center;
            position: relative;
          }
          >div:last-child{
            flex: 7;
          }
        }
        .data-item:nth-child(2n) {
          background: #F2F2F4;
        }
        .footer{
          line-height: 64px;
          background: #FFF;
          text-align: center;
          color: #BCBCBC;
          font-size: 16px;
          border-radius: 0px 0px 8px 8px;
        }
      }
    }
  }
</style>